<template>
    <div class="content">
        <div class="top">
            <van-icon class="icon" name="cross" size="25" @click="back" />
            <span class="text">活动中心</span>
        </div>

        <LuckyWheel
            class="luck"
            ref="myLucky"
            width="300px"
            height="300px"
            :prizes="prizes"
            :blocks="blocks"
            :buttons="buttons"
            @start="startCallback"
            @end="endCallback"
        />

        <div class="bottom">
            <span>今日可抽奖：1次</span>
            <p>我的背包</p>
            <p @click="showPopup">抽奖规则</p>
            <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
                <span style="margin-left: 40%;">抽奖规则</span>
                <p style="margin-top: 30px;">新用户第一次登录可自动获得一次抽奖机会，老用户每个月可随机获得一次抽奖机会。</p>
            </van-popup>
        </div>
        
    </div>
</template>

<script>
    export default {
        data () {
            return {
                show: false,
                blocks: [{ padding: '13px', background: '#ff642b' }],
                prizes: [
                    { fonts: [{ text: '谢谢惠顾', top: '10%', fontColor: 'red',fontWeight: '600' }], background: '#fcdb02' },
                    { fonts: [{ text: '五元优惠券', top: '10%', fontColor: 'red',fontWeight: '600' }], background: '#f9c903' },
                    { fonts: [{ text: '谢谢惠顾', top: '10%', fontColor: 'red',fontWeight: '600' }], background: '#fcdb02' },
                    { fonts: [{ text: '三元优惠券', top: '10%', fontColor: 'red',fontWeight: '600' }], background: '#f9c903' },
                    { fonts: [{ text: '谢谢惠顾', top: '10%', fontColor: 'red',fontWeight: '600' }], background: '#fcdb02' },
                    { fonts: [{ text: '兰博基尼五元购物券', top: '10%', fontColor: 'red',fontWeight: '600' }], background: '#f9c903' },
                ],
                range:[ 10,20,30 ] ,
                buttons: [{
                    radius: '25%',
                    background: '#ff5a01',
                    pointer: true,
                    fonts: [{ text: '开始', top: '-10px',fontColor: '#fff' }]
                }],
            }
        },
        methods: {
            showPopup() {
                this.show = true;
            },
            back(){
                this.$router.push('home/index')
            },
            // 点击抽奖按钮会触发star回调
            startCallback () {
                // 调用抽奖组件的play方法开始游戏
                this.$refs.myLucky.play()
                // 模拟调用接口异步抽奖
                setTimeout(() => {
                    // 假设后端返回的中奖索引是0
                    const index =  Math.random() * 6 >> 0
                    // 调用stop停止旋转并传递中奖索引
                    this.$refs.myLucky.stop(index)
                }, 3500)
            },
            // 抽奖结束会触发end回调
            endCallback (prize) {
                console.log(prize.fonts[0].text)
                let res = prize.fonts[0].text
                if(res.length==4){
                    this.$dialog.confirm({
                    message:`${res}`
                    }).then(()=>{
                    // console.log('确认');
                    })
                }else{
                    this.$dialog.confirm({
                    message:`恭喜您获得 ${res}`
                    }).then(()=>{
                    // console.log('确认');
                    })
                }
                
            },
        }
    }   
</script>

<style lang="scss" scoped>
.luck {
    margin: auto;
    margin-top: 80px;
}
.content {
    background-color: pink;
    height: 100vh;
    width: 100vw;
    position: relative;
}
.top {
    width: 100vw;
    height: 54px;
    background-color: #fff;
    position: relative;
    display: flex;
    .icon {
        position: absolute;
        top: 20%;
        color: #000;
        margin-left: 10px;
    }
    .text {
        font-size: 20px;
        position: absolute;
        left: 40%;
        top:20%;
        color: #000;
    }
}
.bottom {
    position: absolute;
    left: 35%;
    margin-top: 30px;
    >p {
        margin-left: 20px;
    }
}
</style>